<template>
  <view class="page">
    <mineNavbar :styleData="styleData" />
    <view class="p_fixed">
      <view>{{ percentValue }}% 简历完整度</view>
      <view>完整度越高，越能被企业发现</view>
    </view>
    <scroll-view class="scroll" scroll-y>
      <view class="form">
        <view class="form-item-title">
          <view class="title">
            <view class="text">基础信息</view>
            <view class="borderB"> </view>
          </view>
        </view>

        <view class="form-item">
          <view class="item">
            <view class="label"> 姓名 </view>
            <input class="input" type="text" placeholder="请填写" :value="form.name" @change="changeName" />
          </view>
          <view class="line" />
        </view>
        <view class="form-item">
          <view class="item">
            <view class="label"> 电话 </view>
            <input class="input" type="tel" placeholder="请填写" :value="form.mobile" @change="changeMobile"
              maxlength="11" />
          </view>
          <view class="line" />
        </view>
        <!-- 性别 -->
        <view class="form-item">
          <view class="item">
            <view class="label"> 性别 </view>
            <radio-group :value="form.sex.label" @change="changeSex">
              <view class="radio-label">
                <view v-for="(item, index) in form.sex.data" :key="index">
                  <label>
                    <radio :value="item.value" class="radio" :checked="form.sex.label === item.value">{{
                      item.label }}</radio>
                  </label>
                </view>
              </view>
            </radio-group>
          </view>
          <view class="line" />
        </view>
        <!-- 生日 -->
        <view class="form-item">
          <view class="item">
            <view class="label"> 生日 </view>

            <picker style="flex: 1" @change="changeBirthTime" :value="form.birthTime" mode="date">
              <view class="desc"> {{ form.birthTime ? form.birthTime : '请选择' }}</view>
              <view class="arrows">
                <image src="../../../../static/images/emterpriseMineImg/arrow-right.png"
                  mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
              </view>
            </picker>
          </view>

          <view class="line" />
        </view>
        <!-- 最高学历 -->
        <view class="form-item">
          <view class="item">
            <view class="label"> 最高学历 </view>

            <picker style="flex: 1" @change="changeEducation" :value="form.education.index" range-key="dictLabel"
              :range="form.education.data">
              <view class="desc"> {{ form.education.label ? form.education.label : '请选择' }}</view>
              <view class="arrows">
                <image src="../../../../static/images/emterpriseMineImg/arrow-right.png"
                  mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
              </view>
            </picker>
          </view>

          <view class="line" />
        </view>
        <!-- 工作年限 -->
        <view class="form-item">
          <view class="item">
            <view class="label"> 工作年限 </view>
            <input class="input" type="number" placeholder="请填写" :value="form.workExperience"
              @change="changeWorkExperience" />
          </view>
          <view class="line" />
        </view>
      </view>
      <view class="form jobIntention">
        <view class="form-item-title ">
          <view class="title">
            <view class="text">求职意向</view>
            <view class="borderB"> </view>
          </view>
        </view>
        <!-- 求职类型 -->
        <view class="form-item">
          <view class="item">
            <view class="label"> 求职类型 </view>
            <picker style="flex: 1" @change="ChangeJobType" :value="form.jobType.index" :range="form.jobType.data"
              range-key="dictLabel">
              <view class="desc"> {{ form.jobType.label ? form.jobType.label : '请选择' }}</view>
              <view class="arrows">
                <image src="../../../../static/images/emterpriseMineImg/arrow-right.png"
                  mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
              </view>
            </picker>
          </view>

          <view class="line" />
        </view>
        <!-- 意向城市 -->
        <view class="form-item">
          <view class="item">
            <view class="label"> 意向城市 </view>

            <picker mode="multiSelector" @change="ChangeCity" @columnchange="handleColumnChange" :range="form.city.data"
              range-key="label" :value="form.city.index">
              <view class=" desc"> {{ form.city.label ? form.city.label : '请选择' }}
              </view>
              <view class="arrows">
                <image src="../../../../static/images/emterpriseMineImg/arrow-right.png"
                  mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
              </view>
            </picker>
          </view>

          <view class="line" />
        </view>
        <!-- 意向岗位 -->
        <view class="form-item">
          <view class="item">
            <view class="label"> 意向岗位 </view>
            <view class="industry">
              <view class="desc" @click="openPopup">
                <view v-if="form.industryId.label.length" class="industyLabel">
                  <view v-for="item in form.industryId.label" :key="item" class="item">
                    <text>
                      {{ item }}
                    </text>
                  </view>
                  <image src="@/static/images/recruit/cancel.png" mode="scaleToFill" @click="handleDelect()" />
                </view>
                <view v-else>请选择</view>
              </view>
              <view class="arrows" @click="openPopup">
                <image src="../../../../static/images/emterpriseMineImg/arrow-right.png"
                  mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
              </view>
              <uni-popup ref="popup" type="bottom" background-color="#fff">
                <view class="p_popup">
                  <view class="left">
                    <view v-for="item in industryArr" :key="item.id" @click="changeClassfiy(item)"
                      :class="industryIdValue == item.id ? 'active' : ''">{{ item.label }}
                    </view>
                  </view>
                  <view class="right">
                    <view v-for="item in industryChildrenArr" :key="item.id" class="second-item">
                      <view class="post-name">{{ item.label }}</view>
                      <view class="post-num">
                        <view v-for="i in item.children" :key="i.id" @click="changePost(i)"
                          :class="form.industryId.value.indexOf(i.id) != -1 ? 'active' : 'post'">{{ i.label }}</view>
                      </view>
                    </view>
                  </view>
                </view>
              </uni-popup>
            </view>
          </view>

          <view class="line" />
        </view>
        <!-- 意向薪资 -->
        <view class="form-item">
          <view class="item">
            <view class="label"> 意向薪资 </view>

            <picker style="flex: 1" @change="changeSalary" :value="form.salary.index" :range="form.salary.data"
              range-key="dictLabel">
              <view class="desc"> {{ form.salary.label ? form.salary.label : '请选择' }}</view>
              <view class="arrows">
                <image src="../../../../static/images/emterpriseMineImg/arrow-right.png"
                  mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
              </view>
            </picker>
          </view>

          <view class="line" />
        </view>
        <!-- 求职状态 -->
        <view class="form-item">
          <view class="item">
            <view class="label"> 求职状态 </view>

            <picker style="flex: 1" @change="changeJobStatus" :value="form.jobStatus.value" :range="form.jobStatus.data"
              range-key="label">
              <view class="desc"> {{ form.jobStatus.label ? form.jobStatus.label : '请选择' }}</view>
              <view class="arrows">
                <image src="../../../../static/images/emterpriseMineImg/arrow-right.png"
                  mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
              </view>
            </picker>
          </view>

          <view class="line" />
        </view>
        <!-- 到岗时间 -->
        <view class="form-item">
          <view class="item">
            <view class="label"> 到岗时间 </view>

            <picker style="flex: 1" @change="changeArrivalTime" :value="form.arrivalTime.index"
              :range="form.arrivalTime.data" range-key="dictLabel">
              <view class="desc"> {{ form.arrivalTime.label ? form.arrivalTime.label : '请选择' }}</view>
              <view class="arrows">
                <image src="../../../../static/images/emterpriseMineImg/arrow-right.png"
                  mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
              </view>
            </picker>
          </view>
          <view class="line" />
        </view>
      </view>
      <view class="form jobIntention">
        <view class="form-item-title ">
          <view class="title">
            <view class="text">补充信息</view>
            <view class="borderB"> </view>
          </view>
          <view class="include">
            <view>自我介绍</view>
            <view class="right" @click="handleAIWrite">
              <image
                src="http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/11/0d1b00880dd74c19a13ea05848858288.png" />
              <view>智能填写</view>
            </view>
          </view>
          <view class="textarea">
            <textarea name="" id="" cols="40" rows="20" placeholder="请填写内容..." class="textarea_box" :value="form.remark"
              @input="changeRemark" maxlength="1000"></textarea>
          </view>
        </view>
      </view>

      <view class="submit" @click="handleSubmit"> 保存 </view>
      <view style="height: 200rpx" />
    </scroll-view>
  </view>
</template>

<script>
import { getVitae, saveVitae, getAiMessage } from "@/api/pages/mine.js"
import { getDictType, regionTreeLevel, postTree, industryTree, industryAllTree } from "@/api/common.js"
import { verifyMobile } from '@/utils/toast'

export default {
  components: {},
  data() {
    return {
      styleData: {
        tabbarText: "我的简历",
        show: true,
      },
      form: {
        arrivalTime: {
          label: '',
          value: '',
          index: '',
          data: []
        },
        birthTime: "",
        city: {
          label: '',
          value: [],
          index: [],
          data: [[], []]
        },
        education: {
          label: '',
          value: '',
          index: '',
          data: []
        },
        industryId: {
          label: [],
          value: [],
          industryId: '',
        },
        jobType: {
          label: '',
          value: '',
          index: '',
          data: []
        },
        mobile: "",
        name: "",
        province: '',
        remark: "",
        salary: {
          label: '',
          value: '',
          index: '',
          data: []
        },
        seUserId: "",
        sex: {
          label: '',
          data: [
            {
              label: '男',
              value: '0'
            },
            {
              label: '女',
              value: '1'
            },
          ]
        },
        vitaeId: "",
        jobStatus: {
          label: '',
          value: '',
          data: [
            {
              label: '求职中',
              value: 0
            },
            {
              label: '已入职',
              value: 1
            },
          ]
        },
        workExperience: ''
      },
      provinceId: '', //省份Id，
      cityId: '', //省份Id，
      percent: 0,
      industryArr: [],
      industryChildrenArr: [],
      industryIdValue: "",
    };
  },
  computed: {
    percentValue() {
      return parseInt((this.percent / 13) * 100)
    }
  },
  // 监控data中的数据变化
  watch: {},
  onLoad(options) { },
  onShow() { },
  onReady() { },
  async mounted() {
    await this.industryTreeFun()
    await this.getTypeDataFun()
    await this.getVitaeFun()
    setTimeout(() => {
      this.getLabelShowFun()
    }, 500)
  },
  methods: {
    // 输入名字触发
    changeName(e) {
      this.form.name = e.detail.value
    },
    // 输入电话触发
    changeMobile(e) {
      console.log(e);
      this.form.mobile = e.detail.value
    },
    // 选择性别触发
    changeSex(e) {
      this.form.sex.label = e.detail.value
    },
    // 选择生日触发
    changeBirthTime(e) {
      console.log(e);
      this.isAdultFun(e.detail.value)
    },
    // 选择学历触发
    changeEducation(e) {
      this.form.education.label = this.form.education.data[+e.detail.value].dictLabel
      this.form.education.value = this.form.education.data[+e.detail.value].dictValue
    },
    // 选择工作年限触发
    changeWorkExperience(e) {
      this.form.workExperience = e.detail.value
    },
    // 选择求职类型触发
    ChangeJobType(e) {
      this.form.jobType.label = this.form.jobType.data[+e.detail.value].dictLabel
      this.form.jobType.value = this.form.jobType.data[+e.detail.value].dictValue
    },
    ChangeCity(e) {
      console.log(this.form.city.data[1], e.detail.value[1]);
      this.form.city.label = (this.form.city.data[1])[e.detail.value[1]]?.label
      this.provinceId = this.form.city.data[1][e.detail.value[1]]?.parentId
      this.cityId = this.form.city.data[1][e.detail.value[1]]?.id
      console.log(this.provinceId, this.cityId);
    },
    // 滑动城市触发
    handleColumnChange(e) {
      console.log(e)
      let index = e.detail.value;
      // 当滚动切换一级分类时，为当前的一级分类添加它的子类
      if (e.detail.column === 0) {
        this.form.city.data[1] = this.form.city.data[0][index].children;
        this.$set(this.form.city.data, 1, this.form.city.data[0][index].children);
        this.provinceId = this.form.city.data[0][index].id
        this.cityId = this.form.city.data[1][0].id
        this.form.city.label = this.form.city.data[1][0].label
      }
    },
    // 选择意向岗位触发
    changeIndustryId(e) {
      this.form.industryId.label = this.form.industryId.data[+e.detail.value].label
    },
    // 选择意向薪资触发
    changeSalary(e) {
      this.form.salary.label = this.form.salary.data[+e.detail.value].dictLabel
      this.form.salary.value = this.form.salary.data[+e.detail.value].dictValue
    },
    // 选择求职状态触发
    changeJobStatus(e) {
      this.form.jobStatus.label = this.form.jobStatus.data[+e.detail.value].label
      this.form.jobStatus.value = this.form.jobStatus.data[+e.detail.value].value
    },
    // 选择到岗时间触发
    changeArrivalTime(e) {
      this.form.arrivalTime.label = this.form.arrivalTime.data[+e.detail.value].dictLabel
      this.form.arrivalTime.value = this.form.arrivalTime.data[+e.detail.value].dictValue
    },
    // 填写评论触发
    changeRemark(e) {
      console.log(e);
      this.form.remark = e.detail.value
    },
    // 获取我的简历信息
    async getVitaeFun() {
      await getVitae().then((res) => {
        console.log(res, 1);
        if (res.code === 200) {
          this.form.name = res.data.name
          this.form.mobile = res.data.mobile
          this.form.sex.label = res.data.sex
          this.form.birthTime = res.data.birthTime
          // 从简历信息获取的字段去匹配学历数据字典的对象 
          this.form.education.value = res.data.education
          this.form.workExperience = res.data.workExperience
          // 从简历信息获取的字段去匹配求职类型数据字典的对象 
          this.form.jobType.value = res.data.jobType
          // 从省市信息获取的字段去匹配意向城市数据字典的对象 
          this.cityId = res.data.city
          this.provinceId = res.data.province
          console.log(this.form.city.data);
          // 从简历信息获取的字段去匹配薪资数据字典的对象 
          this.form.salary.value = res.data.salary
          this.form.industryId.value = res.data.industryId || []
          console.log(this.form.industryId.value);
          this.form.jobStatus.label = res.data.jobStatus === '1' ? '已入职' : '求职中'
          this.form.jobStatus.value = res.data.jobStatus === '1' ? 1 : 0
          // 从简历信息获取的字段去匹配到岗时间数据字典的对象 
          this.form.arrivalTime.value = res.data.arrivalTime
          this.form.remark = res.data.remark
        }
      })
    },
    //从简历数据中获取回显信息
    getLabelShowFun() {
      console.log(this.form);
      // 从简历信息获取的字段去匹配学历数据字典的对象 
      this.form.education.data.forEach((i, index) => {
        if (this.form.education.value === i.dictValue) {
          this.form.education.label = i.dictLabel
          this.form.education.index = index
          console.log(this.form.education.label);
        }
      })
      // 从简历信息获取的字段去匹配求职类型数据字典的对象 
      this.form.jobType.data.forEach((i, index) => {
        if (this.form.jobType.value === i.dictValue) {
          this.form.jobType.label = i.dictLabel
          this.form.jobType.index = index
        }
      })
      // 从省市信息获取的字段去匹配意向城市数据字典的对象
      console.log(this.form.city.data[0], '回显');
      this.form.city.data[0].forEach((i, index) => {
        i.children.forEach((e, num) => {
          if (e.id == this.cityId) {
            this.form.city.label = e.label
            this.form.city.index = [index, num]
            this.form.city.data[1] = i.children
          }
        })
      })
      // 从岗位信息获取的字段去匹配意向城岗位数据字典的对象 
      industryTree().then((res1) => {
        if (res1.code === 200) {
          res1.data?.forEach((w) => {
            industryAllTree(w.id).then((res2) => {
              if (res2.code === 200) {
                res2.data?.forEach((r) => {
                  r.children?.forEach((i) => {
                    this.form.industryId.value?.forEach((z) => {
                      if (z === i.id) {
                        console.log(i.label);
                        this.form.industryId.label.push(i.label)
                      }
                    })
                  })
                })
              }
            })
          })
        }
      })
      // 从简历信息获取的字段去匹配薪资数据字典的对象 
      this.form.salary.data.forEach((i, index) => {
        if (this.form.salary.value === i.dictValue) {
          this.form.salary.label = i.dictLabel
          this.form.salary.index = index
        }
      })
      // 从简历信息获取的字段去匹配到岗时间数据字典的对象 
      this.form.arrivalTime.data.forEach((i, index) => {
        if (this.form.arrivalTime.value === i.dictValue) {
          this.form.arrivalTime.label = i.dictLabel
          this.form.arrivalTime.index = index
        }
      })
      this.getPercentFun()
    },
    // 从数组id信息获取的字段去匹配岗位分类数据字典的对象
    industryTreeFun() {
      industryTree().then((success) => {
        if (success.code === 200) {
          this.industryArr = success.data || []
          this.industryIdValue = success.data[0].id
          console.log(111, this.industryArr);
          industryAllTree(success.data[0]?.id).then((industryIdRes) => {
            if (industryIdRes.code === 200) {
              this.industryChildrenArr = industryIdRes.data || []
            }
          })
        }
      })
    },
    // 获取简历的各个数据字典
    getTypeDataFun() {
      // 学历
      getDictType('wxb_education_type').then((res) => {
        if (res.code === 200) {
          this.form.education.data = res.data
        }
      })
      // 工作年限
      getDictType('wxb_experience_work').then((res) => {
        if (res.code === 200) {
          this.form.workExperience.data = res.data
        }
      })
      // 求职类型
      getDictType('wxb_job_type').then((res) => {
        if (res.code === 200) {
          this.form.jobType.data = res.data
        }
      })
      // 获取省市二级
      regionTreeLevel({}).then((res) => {
        if (res.code === 200) {
          this.form.city.data[0] = res.data
          this.form.city.data[1] = res.data[0].children
          console.log(this.form.city.data[0], '意向城市');
        }
      })
      // 意向薪资
      getDictType('wxb_salary_type').then((res) => {
        if (res.code === 200) {
          this.form.salary.data = res.data
        }
      })
      // 到岗时间
      getDictType('wxb_arrival_time_type').then((res) => {
        if (res.code === 200) {
          this.form.arrivalTime.data = res.data
        }
      })
    },
    // 打开意向岗位底部弹窗
    openPopup() {
      this.$refs.popup.open('bottom')
    },
    changeClassfiy(e) {
      this.industryIdValue = e.id;
      industryAllTree(e.id).then((res) => {
        if (res.code == 200) {
          this.industryChildrenArr = res.data; // 获取二级名称-三级岗位
        }
      });
    },

    // 获取岗位数据
    changePost(item) {
      // 多选岗位
      console.log(item, "岗位");
      // this.form.industryId.value = item.id;
      if (this.form.industryId.value.indexOf(item.id) == -1) {
        if (this.form.industryId.value.length < 3) {
          this.form.industryId.value.push(item.id); // 选中
          this.form.industryId.label.push(item.label)
        } else {
          uni.showToast({ title: '最多选择3个意向岗位', icon: 'error' })
        }
      } else {
        this.form.industryId.value.splice(this.form.industryId.value.indexOf(item.id), 1); // 取消
        this.form.industryId.label.splice(this.form.industryId.label.indexOf(item.label), 1); // 取消
      }
    },

    // 删除意向岗位
    handleDelect(item) {
      this.form.industryId.value = []; // 取消
      this.form.industryId.label = []; // 取消
    },

    // 保存我的简历信息
    handleSubmit() {
      if (verifyMobile(this.form.mobile)) {
        saveVitae({
          name: this.form.name,
          mobile: this.form.mobile,
          sex: this.form.sex.label,
          birthTime: this.form.birthTime,
          education: this.form.education.value,
          workExperience: this.form.workExperience,
          jobType: this.form.jobType.value,
          province: this.provinceId,
          city: this.cityId,
          industryId: this.form.industryId.value,
          salary: this.form.salary.value,
          arrivalTime: this.form.arrivalTime.value,
          remark: this.form.remark,
          jobStatus: this.form.jobStatus.value,
        }).then((res) => {
          if (res.code === 200) {
            uni.showToast({ title: '保存成功' })
            uni.navigateBack()
          } else {
            uni.showToast({ title: '请填写完整信息', icon: 'none' })
          }
        })
      }

    },
    // ai智能填写
    handleAIWrite() {
      getAiMessage({
        prompt: '我叫XXX，性别X，我是XX学历，有X年工作经验，我想在XX（意向城市）找一个XX（求职类型）的工作，意向岗位是XXX，意向工资为XX，目前是XX的一个状态，可以XX（到岗时间），XX（判定手写的自我介绍，有则加进去），根据以上信息帮我生成一份自我介绍/简历'
      }).then((res) => {
        if (res.code === 200) {
          this.form.remark = res.data
        }
      })
    },
    // 简历完整度计算
    getPercentFun() {
      let num = 0;
      if (this.form.arrivalTime.label) {
        num = num + 1
      }
      if (this.form.birthTime) {
        num = num + 1
      }
      if (this.form.city.label) {
        num = num + 1
      }
      if (this.form.education.label) {
        num = num + 1
      }
      if (this.form.industryId.value.length) {
        num = num + 1
      }
      if (this.form.jobType.label) {
        num = num + 1
      }
      if (this.form.mobile) {
        num = num + 1
      }
      if (this.form.name) {
        num = num + 1
      }
      if (this.form.remark) {
        num = num + 1
      }
      if (this.form.salary.label) {
        num = num + 1
      }
      if (this.form.sex.label) {
        num = num + 1
      }
      if (this.form.jobStatus.label) {
        num = num + 1
      }
      if (this.form.workExperience) {
        num = num + 1
      }
      console.log(Boolean(this.form.arrivalTime.label), Boolean(this.form.birthTime), Boolean(this.form.city.label),
        Boolean(this.form.education.label), Boolean(this.form.industryId.label), Boolean(this.form.jobType.label),
        Boolean(this.form.mobile), Boolean(this.form.name), Boolean(this.form.remark),
        Boolean(this.form.salary.label), Boolean(this.form.sex.label), Boolean(this.form.jobStatus.label),
        Boolean(this.form.workExperience.label),);
      this.percent = num

    },
    // 递归查询意向岗位的id
    checkIndustryId(child, item) {
      // for (let i = 0; i < child.length; i++) {
      //   if (item === child[i].id) {
      //     this.form.industryId.label.push(child[i].label)
      //     break
      //   } else {

      //     continue
      //   }
      // }
    },
    // 判断选择的出生日期是否满16周岁
    isAdultFun(date) {
      const dateArr = date.split('-')
      const time = new Date()
      const year = time.getFullYear()
      if ((+year) - (+dateArr[0]) >= 16) {
        this.form.birthTime = date
      } else if ((+year) - (+dateArr[0]) < 0) {
        uni.showToast({ title: '请选择正确的年份', icon: 'none' })
      } else {
        uni.showToast({ title: '未满16周岁，填写失败', icon: 'none' })
      }
    }
  },
};
</script>
<style lang="scss">
.page {
  height: 100vh;
  overflow: hidden;

  background-color: #f9f9f9;

  .p_fixed {
    position: fixed;
    top: var(--safeArea-top) + "px";
    left: 0;
    width: 750rpx;
    height: 80rpx;
    background: #FF9E24;
    z-index: 99;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40rpx;
    box-sizing: border-box;
    color: #fff;
    font-size: 24rpx;

    >view:first-child {
      font-size: 28rpx;
    }
  }

  .scroll {
    display: flex;
    position: relative;
    width: 700rpx;
    height: 100%;
    overflow: hidden;
    margin: 0 24rpx;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;

    .form {
      margin-top: 100rpx;
      width: 100%;
      padding-bottom: 33rpx;
      border-radius: 16rpx;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;

      .form-item-title {
        width: 100%;
        margin-top: 28rpx;

        .title {
          position: relative;
          width: 128rpx;
          height: 45rpx;
          font-weight: 500;
          font-size: 32rpx;
          color: #000000e0;
          margin-left: 24rpx;
          margin-bottom: 24rpx;

          .text {
            z-index: 80;
            position: absolute;
          }

          .borderB {
            position: absolute;
            bottom: 4rpx;
            width: 50%;
            height: 14rpx;
            background-color: #ff9e24;
            z-index: 10;
            border-radius: 10rpx;
          }
        }
      }

      .form-item {
        position: relative;
        height: 98rpx;
        width: 702rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .item {
          display: flex;
          align-items: center;
          margin-left: 24rpx;
          margin-right: 24rpx;

          width: 100%;
          height: 100%;

          .p_popup {
            display: flex;

            .left {
              width: 242rpx;
              background: #d8d8d85c;
              color: #00000073;
              overflow: auto;
              height: 700rpx;
              font-size: 26rpx;

              >view {
                width: 100%;
                height: 120rpx;
                line-height: 120rpx;
                text-align: center;
              }

              .active {
                background-color: #fff;
                color: #000;
              }
            }

            .right {
              width: calc(100% - 200rpx);
              overflow: auto;
              font-size: 28rpx;
              display: flex;
              flex-wrap: nowrap;
              justify-content: flex-start;
              flex-direction: column;
              align-items: flex-start;
              align-content: space-between;
              height: 700rpx;

              .second-item {
                width: 100%;
              }

              .post-name {
                width: 100%;
                font-weight: 600;
                font-size: 28rpx;
                color: #000000e0;
                height: 88rpx;
                line-height: 88rpx;
                padding-left: 20rpx;
                box-sizing: border-box;
              }

              .post-num {
                width: 100%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                align-items: center;
              }

              .post {
                width: auto;
                min-width: 218rpx;
                min-height: 65rpx;
                border-radius: 32rpx;
                background-color: #efefef;
                color: #868686;
                text-align: center;
                line-height: 65rpx;
                margin: 10rpx;
                font-size: 24rpx;
                color: #000000e0;
                padding: 0 8rpx;
              }

              .active {
                min-width: 218rpx;
                min-height: 65rpx;
                border-radius: 32rpx;
                background-color: #ff9e24;
                color: #fff;
                text-align: center;
                line-height: 65rpx;
                font-size: 24rpx;
                margin: 10rpx;
                padding: 0 8rpx;
              }
            }
          }

          .industry {
            width: 70%;

            .industyLabel {
              display: flex;
              align-items: center;

              .item {
                max-width: 33%;
                position: relative;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
              }

              >image {
                width: 30rpx;
                height: 30rpx;
              }
            }
          }

          .label {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000;
            opacity: 0.45;
            margin-right: 40rpx;
            display: flex;
          }

          .radio-label {
            display: flex;

            >view {
              margin: 20rpx;
            }
          }


          .desc {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000e0;
          }

          .arrows {
            position: absolute;
            bottom: 45rpx;
            right: 24rpx;
            width: 26rpx;
            height: 26rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }

        .line {
          height: 2rpx;
          background-color: #f2f2f2;
          margin: 0 24rpx;
        }
      }
    }

    .jobIntention {
      margin-top: 20rpx;

      .include {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 28rpx;
        color: #000000a3;
        margin: 30rpx 0;
        margin-left: 24rpx;

        .right {
          display: flex;
          align-items: center;
          margin-right: 24rpx;

          image {
            width: 32rpx;
            height: 32rpx;
            margin-right: 10rpx;
          }
        }
      }

      .textarea {
        width: 100%;
        display: flex;
        justify-content: center;

        .textarea_box {
          padding: 24rpx;
          width: 654rpx;
          height: 320rpx;
          background: #F9F9F9;
          border-radius: 16rpx;
          margin-top: 20rpx;
          box-sizing: border-box;
        }
      }
    }

    .submit {
      width: 420rpx;

      margin: 80rpx auto;
      background: #ff9e24;
      border-radius: 44rpx;
      line-height: 88rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #ffffff;
      text-align: center;
    }
  }
}

radio .wx-radio-input {
  width: 35rpx;
  height: 35rpx;
  border-radius: 50%;
  border: 2rpx solid #ccc;
  background: 0 0
}

radio .wx-radio-input.wx-radio-input-checked {
  width: 35rpx;
  height: 35rpx;
  border: 2rpx solid #FF9E24;
  background-color: #fff !important
}

radio .wx-radio-input.wx-radio-input-checked::before {
  width: 35rpx;
  height: 35rpx;
  border-radius: 50%;
  width: 20rpx;
  height: 20rpx;
  line-height: 20rpx;
  text-align: center;
  font-size: 0rpx;
  color: transparent;
  background: #FF9E24;
  transform: translate(-50%, -50%) scale(1)
}
</style>
